<html>
<head>
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile.custom.structure.min.css" />
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile.custom.theme.min.css">
<link rel="stylesheet" type="text/css" href="index.css"></script>
<script src="jquerymobile/jquery-1.8.2.min.js"></script>
<script src="jquerymobile/jquery.mobile-1.2.0.min.js"></script>
<script src="jquerymobile/jquery.tmpl.min.js"></script>
<script src="questionnaire_preparation.js"></script>
<script src="CHANGE_QUESTIONS_HERE.js"></script>
<script src="index.js"></script>
</head>
<body>

<!------------------------------------------------------------------------------------------------------------------------------------
	HTML below this line.
------------------------------------------------------------------------------------------------------------------------------------->

<!-- containers for dynamic questions -->
<div id="container1" data-role="page" data-title="" data-url="" data-theme="a">
</div>
<div id="container2" data-role="page" data-title="" data-url="" data-theme="a">
</div>

<!-- normal question template -->
<script id="normal_question" type="text/x-jquery-tmpl">
    <div data-role='header' data-position='inline'>
        <h1>Question</h1>
    </div>

	<div data-role="content">
		<h2>${question}</h2>
		
		<button class="show_answer">Answers &gt;&gt;</button>
	</div>
    
    <div data-role="footer" data-theme="a">
           <div data-role="controlgroup" data-type="horizontal">
             <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
             <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
           </div>
    </div>
</script>

<!-- survey ID question template -->
<script id="survey_id_question" type="text/x-jquery-tmpl">
    <div data-role='header' data-position='inline'>
        <h1>Question</h1>
    </div>

	<div data-role="content">
		<h2>${question} <span style="color:#AAFFAA">${getCurrentSurveyID()}</span></h2>
		
		<button class="show_answer">Answers &gt;&gt;</button>
	</div>
    
    <div data-role="footer" data-theme="a">
           <div data-role="controlgroup" data-type="horizontal">
             <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
             <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
           </div>
    </div>
</script>

<!-- text answers template -->
<script id="text_answer" type="text/x-jquery-tmpl">
    <div data-role='header' data-position='inline'>
        <h1>Answer</h1>
    </div>

	<div data-role="content">
		<form>
		{{each(answer_index,answer_item) answer_units}}
			 ${answer_item}: <input type="text" class="value" data-unit="${answer_item}" data-choice-value="${answer_item}" data-mini="true" />
		{{/each}}
		</form>
		
		<button class="next_question">Next &gt;&gt;</button>
	</div>
    
    <div data-role="footer" data-theme="a">
           <div data-role="controlgroup" data-type="horizontal">
             <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
             <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
           </div>
    </div>
</script>

<!-- numerical answers template -->
<script id="numeric_answer" type="text/x-jquery-tmpl">
    <div data-role='header' data-position='inline'>
        <h1>Answer</h1>
    </div>

	<div data-role="content">
		<table>
		{{each(answer_index,answer_item) answer_units}}
			<tr>
				<td><input type="text" class="value" data-unit="${answer_item}" data-choice-value="${answer_item}" data-mini="true" style="width:100px;" /></td>
				<td>${answer_item}</td>
			</tr>
		{{/each}}
		</table>
		
		<button class="next_question">Next &gt;&gt;</button>
	</div>
    
    <div data-role="footer" data-theme="a">
           <div data-role="controlgroup" data-type="horizontal">
             <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
             <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
           </div>
    </div>
</script>

<!-- radio other answers template -->
<script id="radio_other_answer" type="text/x-jquery-tmpl">
    <div data-role='header' data-position='inline'>
        <h1>Answer</h1>
    </div>

	<div data-role="content">
		{{each(answer_index,answer_item) answer_choices}}
			<button class="next_question" value="${answer_item}" data-choice-value="${answer_item}">${answer_item}</button>
		{{/each}}

		${text_input}: <input type = "text" name = "text_entry" class = "tentry"/>
		<button class="next_question">Next &gt;&gt;</button>
	</div>
    
    <div data-role="footer" data-theme="a">
           <div data-role="controlgroup" data-type="horizontal">
             <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
             <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
           </div>
    </div>
</script>

<!-- radio answers template -->
<script id="radio_answer" type="text/x-jquery-tmpl">
    <div data-role='header' data-position='inline'>
        <h1>Answer</h1>
    </div>

	<div data-role="content">
		{{each(answer_index,answer_item) answer_choices}}
			<button class="next_question" value="${answer_item}" data-choice-value="${answer_item}">${answer_item}</button>
		{{/each}}
 	</div>
    
    <div data-role="footer" data-theme="a">
           <div data-role="controlgroup" data-type="horizontal">
             <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
             <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
           </div>
    </div>
</script>

<!-- checkbox answers template -->
<script id="checkbox_answer" type="text/x-jquery-tmpl">
    <div data-role='header' data-position='inline'>
        <h1>Answer</h1>
    </div>
	
	<div data-role="content">
		<form name = "checkForm" class = "value">
			{{each(answer_index,answer_item) answer_choices}}
			 ${answer_item}: <input type="checkbox" name="choice" class="choices" value="${answer_item}" data-choice-value="${answer_item}"/>
			{{/each}}
		</form>
	    <button class="next_question">Next &gt;&gt;</button>
 	</div>

    <div data-role="footer" data-theme="a">
           <div data-role="controlgroup" data-type="horizontal">
             <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
             <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
           </div>
    </div>
</script>

<!-- checkbox_text answers template -->
<script id="checkbox_text_answer" type="text/x-jquery-tmpl">
    <div data-role='header' data-position='inline'>
        <h1>Answer</h1>
    </div>
	
	<div data-role="content">
		<form name = "checkForm" class = "value">
			{{each(answer_index,answer_item) answer_choices}}
			 ${answer_item}:<input type="checkbox" name="choice" class="choices" value="${answer_item}" data-choice-value="${answer_item}"/>
			{{/each}}
			
			${text_input}: <input type = "text" name = "text_entry" class = "tentry"/>
		</form>
		
	    <button class="next_question">Next &gt;&gt;</button>
 	</div>

    <div data-role="footer" data-theme="a">
           <div data-role="controlgroup" data-type="horizontal">
             <a href="#help_dialog" data-rel="dialog" data-role="button" data-transition="flip">Help</a>
             <a href="#home" data-rel="dialog" data-role="button" data-transition="flip">Home</a>
           </div>
    </div>
</script> 

<!------------------------------------------------------------------------------------------------------------------------------------
	HTML above this line.
------------------------------------------------------------------------------------------------------------------------------------->

</body>
</html>
